<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.myDiv {
				width: 200px;
				height: 400px;
				border: 1px solid red;
				background: rgba(0,0,0,.5);
			}

			.mask {
				position: relative;
				filter: blur(5px);
				user-select: none;
			}

			.mask::after {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: '';
				display: block;
				background: rgba(255, 253, 253, 0.2);
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">生成图片</button>
		<div class="myDiv" id="imgDiv">
			<p>测试测试</p>
			<p>测试测试</p>
			<p>测试测试</p>
			<p>测试测试</p>
		</div>
		<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="plugin/bluebird.min.js"></script>
		<script type="text/javascript" src="plugin/html2canvas.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				// canvas生成图片
				$("#btn").on("click", function() {
					var getPixelRatio = function(context) { // 获取设备的PixelRatio
						var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 0.5;
						return (window.devicePixelRatio || 0.5) / backingStore;
					};
					//生成的图片名称
					var imgName = "cs.jpg";
					var shareContent = document.getElementById("imgDiv");
					var width = shareContent.offsetWidth;
					var height = shareContent.offsetHeight;
					var canvas = document.createElement("canvas");
					var context = canvas.getContext('2d');
					var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
					canvas.width = width * scale;
					canvas.height = height * scale;
					canvas.style.width = width + 'px';
					canvas.style.height = height + 'px';
					context.scale(scale, scale);
					var opts = {
						scale: scale,
						canvas: canvas,
						width: width,
						height: height,
						dpi: window.devicePixelRatio
					};
					html2canvas(shareContent, opts).then(function(canvas) {
						context.imageSmoothingEnabled = false;
						context.webkitImageSmoothingEnabled = false;
						context.msImageSmoothingEnabled = false;
					 context.imageSmoothingEnabled = false;
						var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
						dataURIToBlob(imgName, dataUrl, callback);
					});
				});
			})
			// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
			var dataURIToBlob = function(imgName, dataURI, callback) {
				var binStr = atob(dataURI.split(',')[1]),
					len = binStr.length,
					arr = new Uint8Array(len);
				for (var i = 0; i < len; i++) {
					arr[i] = binStr.charCodeAt(i);
				}
				callback(imgName, new Blob([arr]));
			}
			var callback = function(imgName, blob) {
				var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function() {
					if (navigator.msSaveBlob) {
						return navigator.msSaveBlob(blob, imgName);
					}
				});
				triggerDownload[0].click();
				triggerDownload.remove();
			};
		</script>
	</body>
</html>
